<template>
  <!-- PageHeader 第二种使用方式 (v-slot) -->
  <a-card :bordered="false">
    <a-steps
      class="steps"
      :current="currentTab"
    >
      <a-step title="Select bank" />
      <a-step title="Fill in the account and password" />
      <a-step title="Complete" />
    </a-steps>
    <div class="content">
      <step1
        v-if="currentTab === 0"
        @nextStep="nextStep"
        @institution="handlerInstitution"
      />
      <step2
        v-if="currentTab === 1"
        :institution="institution"
        @nextStep="nextStep"
        @prevStep="prevStep"
      />
      <step3
        v-if="currentTab === 2"
        @prevStep="prevStep"
        @finish="finish"
      />
    </div>
  </a-card>
</template>

<script>
import Step1 from './Step1';
import Step2 from './Step2/Index.vue';
import Step3 from './Step3';

export default {
  name: 'StepForm',

  components: {
    Step1,
    Step2,
    Step3
  },
  data() {
    return {
      currentTab: 0,

      institution: {
 type: 'institution',
id: 'AU00000',
name: 'Basiq Bank',
shortName: 'Basiq',
institutionType: 'Test Bank',
country: 'Australia',
serviceName: 'Personal Online Banking',
serviceType: 'Personal Banking',
loginIdCaption: 'Login',
passwordCaption: 'Password',
tier: '1',
authorization: 'user',
features: {
 login: ['web'],
accounts: {
 accountNo: ['web'], name: ['web'], currency: ['web'], balance: ['web'], availableFunds: [], lastUpdated: ['web'], accountHolder: ['web'], meta: []
},
transactions: {
 status: ['web'], description: ['web'], date: ['web'], amount: ['web'], balance: [], class: []
},
profile: {
 fullName: [], firstName: [], lastName: [], middleName: [], phoneNumbers: [], emailAddresses: [], physicalAddresses: []
}
},
stage: 'live',
status: 'operational',
stats: {
 averageDurationMs: {
 verifyCredentials: 8244, retrieveAccounts: 125, retrieveTransactions: 86, retrieveMeta: 28, total: 8483
}
},
logo: { type: 'image', colors: null, links: { square: 'https://d388vpyfrt4zrj.cloudfront.net/AU00001.svg', full: 'https://d388vpyfrt4zrj.cloudfront.net/AU00001-full.svg' } },
links: { self: 'https://au-api.basiq.io/institutions/AU00001' }
}
    };
  },
  methods: {
    // handler institution
    handlerInstitution(institution) {
      console.log(institution, 'dadadadd');
      this.institution = institution;
    },

    // handler
    nextStep(institution) {
      if (this.currentTab < 2) {
        this.currentTab += 1;
      }
    },
    prevStep() {
      if (this.currentTab > 0) {
        this.currentTab -= 1;
      }
    },
    finish() {
      this.currentTab = 0;
    }
  }
};
</script>

<style lang="less" scoped>
  .steps {
    padding-top: 60px;
    padding-bottom: 60px;
    max-width: 780px;
    margin: 0 auto;
  }

  .content {
    min-height: 500px;
  }
</style>
